<template>
  <view class="login-container">
    <!-- 引导页 -->
    <view v-if="!guideCompleted" class="guide-container">
      <swiper
        class="guide-swiper"
        :indicator-dots="true"
        :autoplay="false"
        @change="handleSwiperChange"
      >
        <swiper-item
          v-for="(guide, index) in guides"
          :key="index"
          class="guide-item"
        >
          <image
            :src="url('g', index, 'png')"
            mode="aspectFill"
            class="guide-image"
          />
          <view class="guide-content">
            <text
              class="guide-title animate__animated"
              :class="currentIndex === index ? 'animate__fadeInUp' : ''"
            >
              {{ guide.title }}
            </text>
            <text
              class="guide-desc animate__animated"
              :class="
                currentIndex === index
                  ? 'animate__fadeInUp animate__delay-1s'
                  : ''
              "
            >
              {{ guide.description }}
            </text>
            <view
              v-if="index === guides.length - 1"
              class="guide-actions animate__animated animate__fadeIn"
            >
              <button class="start-btn" @tap="startApp">
                <text class="bi bi-arrow-right-circle"></text>
                开启赣傩之旅
              </button>
            </view>
          </view>
        </swiper-item>
      </swiper>

      <!-- 跳过按钮 -->
      <view
        class="skip-btn"
        @tap="startApp"
        v-if="currentIndex !== guides.length - 1"
      >
        跳过 {{ currentIndex + 1 }}/3
      </view>
    </view>

    <!-- 背景图轮播 -->
    <view class="background-slider">
      <image
        v-for="(bg, index) in backgrounds"
        :key="index"
        :src="url('g', index, 'png')"
        class="background-image"
        :class="{
          active: currentBgIndex === index,
          'fade-out': isChanging && currentBgIndex === index,
          'fade-in': isChanging && nextBgIndex === index,
        }"
      ></image>
    </view>

    <!-- 遮罩层 -->
    <view class="overlay"></view>

    <!-- 登录卡片 -->
    <view class="login-card animate__animated animate__fadeIn">
      <view class="d-flex justify-content-center uni-my-4">  <cover-image
        :src="url('logoalpha', '', 'jpg')"
        style="width: 130rpx"
      ></cover-image></view>
     
      <!-- <view class="login-header">
        <text class="login-title">{{ status.data.message }}</text>
      </view> -->

      <view class="login-form">
        <uni-forms ref="form" :modelValue="formData">
          <uni-forms-item name="account">
            <uni-easyinput
              v-model="formData.account"
              placeholder="用户名"
              :clearable="true"
              prefixIcon="person"
            />
          </uni-forms-item>

          <uni-forms-item name="password">
            <uni-easyinput
              v-model="formData.password"
              type="password"
              placeholder="密码"
              :clearable="true"
              prefixIcon="locked"
            />
          </uni-forms-item>

          <button class="login-btn" @tap="login" :disabled="!agreePrivacy">
            <uni-icons type="login" size="20" color="#fff"></uni-icons>
            登录
          </button>
        </uni-forms>

        <!-- 隐私协议复选框 -->
        <view class="d-flex justify-content-center">
          <view class="privacy-agreement">
            <view
              class="custom-checkbox"
              :class="{ checked: agreePrivacy }"
              @tap="togglePrivacy"
            >
              <text class="bi bi-check2" v-if="agreePrivacy"></text>
            </view>
            <text class="privacy-text" @tap="goToPrivacyPolicy"
              >我已阅读并同意《隐私协议》</text
            >
          </view>
        </view>

        <!-- 第三方登录分割线 -->
        <!-- <view class="divider">
          <text class="divider-text">其他登录方式</text>
        </view> -->

        <view class="third-party-login">
          <!-- 微信登录按钮 -->
          <!-- #ifdef MP-WEIXIN -->
          <button
            class="third-party-btn wx-btn"
            @tap="wxLogin"
            open-type="getUserInfo"
          >
            <text class="bi bi-wechat"></text>
            微信登录
          </button>
          <!-- #endif -->

          <!-- H5/APP平台的微信登录 -->
          <!-- #ifdef H5 || APP-PLUS -->
          <!-- <button 
            class="third-party-btn wx-btn" 
            @tap="wxLogin"
          >
            <text class="bi bi-wechat"></text>
            微信登录
          </button> -->
          <!-- #endif -->

          <!-- QQ登录按钮 -->
          <!-- #ifdef MP-QQ -->
          <!-- <button 
            class="third-party-btn qq-btn" 
            @tap="qqLogin"
          >
            <text class="bi bi-tencent-qq"></text>
            QQ登录
          </button> -->
          <!-- #endif -->

          <!-- H5/APP平台的QQ登录 -->
          <!-- #ifdef H5 || APP-PLUS -->
          <!-- <button 
            class="third-party-btn qq-btn" 
            @tap="qqLogin"
          >
            <text class="bi bi-tencent-qq"></text>
            QQ登录
          </button> -->
          <!-- #endif -->
        </view>
      </view>

      <view class="loading-section" v-if="loading">
        <uni-load-more status="loading" :content-text="loadingText" />
      </view>

      <!-- <view class="tips-section">
        <text class="tips-text"
          >DCloud
          <uni-icons
            type="cloud-upload"
            size="16"
          />云函数保障账号注册安全</text
        >
      </view> -->

      <!-- <view class="tips-section">
				<text class="tips-text"><text class="bi bi-infinity"></text>联动多端|H5网页|小程序|APP|IOS|鸿蒙</text>
			</view> -->

      <view class="register-link">
        <text>没有账号？</text>
        <text class="link-text" @tap="goToRegister">注册一个!</text>
      </view>

      <view class="forgot-password">
        <text @tap="goToUpdatePassword" class="forgot-link">
          <uni-icons type="help" size="16"></uni-icons>
          忘记密码？
        </text>
      </view>
    </view>

    <!-- 微信扫码登录弹窗 -->
    <uni-popup
      ref="wxQrCodePopup"
      type="center"
      :mask-click="false"
      v-if="wxQrCodePopupVisible"
    >
      <view class="qrcode-popup-content">
        <view class="qrcode-header">
          <text class="qrcode-title">微信扫码登录</text>
          <text class="bi bi-x close-icon" @tap="closeWxQrCodePopup"></text>
        </view>

        <view class="qrcode-container">
          <image
            v-if="wxQrCodeUrl"
            :src="wxQrCodeUrl"
            mode="aspectFit"
            class="qrcode-image"
          ></image>
          <view v-else class="qrcode-loading">
            <uni-load-more
              status="loading"
              :content-text="{ contentdown: '加载中' }"
            ></uni-load-more>
          </view>
        </view>

        <view class="qrcode-tips">
          <text>请使用微信扫一扫</text>
          <text>扫描二维码后确认即可登录</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted } from "vue";
import { useUserStore } from "@/stores/userStore";
const url = $url;
const userStore = useUserStore();
const loading = ref(false);
const formData = reactive({
  account: "13800138001",
  password: "123456",
});
const goToUpdatePassword = () => {
  uni.navigateTo({
    url: "/pages/other/updatapassword",
  });
};
const status = ref({
  data: {
    message: "登录",
  },
});

const loadingText = {
  contentdown: "登录中...",
  contentrefresh: "请稍候...",
  contentnomore: "",
};

const backgrounds = [1, 2, 3]; // 对应三张背景图
const currentBgIndex = ref(0);
const nextBgIndex = ref(0);
const isChanging = ref(false);
let bgTimer = null;

// 切换背景图
const changeBg = () => {
  isChanging.value = true;
  nextBgIndex.value = (currentBgIndex.value + 1) % backgrounds.length;

  setTimeout(() => {
    currentBgIndex.value = nextBgIndex.value;
    isChanging.value = false;
  }, 1000); // 与 CSS 动画时长匹配
};

// 启动背景轮播
onMounted(() => {
  bgTimer = setInterval(changeBg, 5000); // 每5秒切换一次
});

// 清理定时器
onUnmounted(() => {
  if (bgTimer) {
    clearInterval(bgTimer);
  }
});

const agreePrivacy = ref(true);

const togglePrivacy = () => {
  agreePrivacy.value = !agreePrivacy.value;
};

const goToPrivacyPolicy = () => {
  uni.navigateTo({
    url: "/pages/other/privacyPolicy", // 跳转到隐私协议页面
  });
};

const login = async () => {
  if (!agreePrivacy.value) {
    uni.showToast({
      title: "请同意隐私协议",
      icon: "none",
    });
    return;
  }

  loading.value = true;

  try {
    const res = await uni.request({
      url: "https://fc-mp-d7d620be-76ea-43bb-a05a-d38ceb13c655.next.bspapp.com/login",
      method: "POST",
      data: {
        account: formData.account,
        password: formData.password,
      },
    });

    const { status, message, userInfo } = res.data;

    switch (status) {
      case 0:
        uni.showToast({
          title: "未注册",
          icon: "error",
        });
        break;
      case 1:
        // 更新用户信息到store
        userStore.updateUserInfo(userInfo);

        uni.showToast({
          title: "登录成功",
          icon: "success",
          success: () => {
            setTimeout(() => {
              uni.reLaunch({
                url: "/pages/index/index",
              });
            }, 1500);
          },
        });
        break;
      case 2:
        uni.showToast({
          title: "密码错误",
          icon: "error",
        });
        break;
    }
  } catch (error) {
    uni.showToast({
      title: "登录失败",
      icon: "error",
    });
    console.error("登录错误:", error);
  } finally {
    loading.value = false;
  }
};

const goToRegister = () => {
  uni.navigateTo({
    url: "/pages/other/register",
  });
};

// 引导页数据
const guides = [
  {
    title: "探索赣傩文化",
    description: "感受千年传承的非遗魅力",
  },
  {
    title: "定制专属面具",
    description: "体验传统工艺的独特创作",
  },
  {
    title: "开启文化之旅",
    description: "让我们一起传承赣傩文化",
  },
];

const currentIndex = ref(0);
const guideCompleted = ref(false);

// 处理滑动变化
const handleSwiperChange = (e) => {
  currentIndex.value = e.detail.current;
};

// 开始使用应用
const startApp = () => {
  guideCompleted.value = true;
  // 保存状态到本地存储，下次不再显示引导页
  uni.setStorageSync("guide_completed", true);
};

// 检查是否需要显示引导页
onMounted(() => {
  const isGuideCompleted = uni.getStorageSync("guide_completed");
  if (isGuideCompleted) {
    guideCompleted.value = true;
  }
});

// 微信登录
const wxLogin = async () => {
  try {
    // 显示加载中
    uni.showLoading({
      title: "登录中...",
      mask: true,
    });

    // #ifdef MP-WEIXIN
    // 微信小程序登录流程
    const loginRes = await uni.login();
    const { code } = loginRes;

    // 获取用户信息
    let userInfo = null;
    try {
      const userInfoRes = await uni.getUserProfile({
        desc: "用于完善用户资料",
      });
      userInfo = userInfoRes.userInfo;
    } catch (e) {
      // 用户拒绝授权，继续使用code登录
      console.log("用户拒绝授权个人信息:", e);
    }

    // 调用云函数登录
    const wxMpResult = await uni.callFunction({
      name: "otherLogin",
      data: {
        provider: "weixin",
        code: code,
        userInfo: userInfo,
      },
    });

    if (wxMpResult.result.status === 1) {
      handleLoginSuccess(wxMpResult.result.userInfo);
    } else {
      throw new Error(wxMpResult.result.message || "登录失败");
    }
    // #endif

    // #ifdef APP-PLUS
    // APP端微信登录
    uni.login({
      provider: "weixin",
      success: async function (loginRes) {
        if (loginRes.errMsg == "login:ok") {
          const wxAppResult = await uni.callFunction({
            name: "otherLogin",
            data: {
              provider: "weixin",
              code: loginRes.code,
              authResult: loginRes.authResult,
            },
          });

          if (wxAppResult.result.status === 1) {
            handleLoginSuccess(wxAppResult.result.userInfo);
          } else {
            throw new Error(wxAppResult.result.message || "登录失败");
          }
        } else {
          throw new Error("微信登录失败");
        }
      },
      fail: function (err) {
        console.error("App微信登录失败:", err);
        uni.showToast({
          title: "微信登录失败",
          icon: "none",
        });
      },
    });
    // #endif

    // #ifdef H5
    // H5微信登录流程 - 修改为支持扫码登录
    if (isWeixinBrowser()) {
      // 在微信浏览器中 - 使用原有的授权方式
      // 获取微信授权码
      const code = getUrlParam("code");
      if (!code) {
        // 跳转到微信授权页面
        const APP_ID = process.env.VUE_APP_WEIXIN_APPID || "";
        const redirectUri = encodeURIComponent(window.location.href);
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APP_ID}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo#wechat_redirect`;
        return;
      }

      // 有code则调用云函数登录
      const wxH5Result = await uni.callFunction({
        name: "otherLogin",
        data: {
          provider: "weixin",
          code: code,
          platform: "h5",
        },
      });

      if (wxH5Result.result.status === 1) {
        handleLoginSuccess(wxH5Result.result.userInfo);
      } else {
        throw new Error(wxH5Result.result.message || "登录失败");
      }
    } else {
      // 非微信浏览器 - 显示扫码登录弹窗
      uni.hideLoading();
      openWxQrCodePopup();
    }
    // #endif
  } catch (error) {
    console.error("微信登录错误:", error);
    uni.showToast({
      title: error.message || "微信登录失败",
      icon: "none",
    });
  } finally {
    uni.hideLoading();
  }
};

// 添加微信扫码登录相关变量和函数
const wxQrCodePopupVisible = ref(false);
const wxQrCodeUrl = ref("");
const wxLoginPollingTimer = ref(null);
const wxLoginState = ref("");

// 打开微信扫码登录弹窗
const openWxQrCodePopup = async () => {
  try {
    wxQrCodePopupVisible.value = true;

    // 调用云函数获取微信扫码登录的二维码
    const res = await uni.callFunction({
      name: "getWxQrCode",
      data: {
        redirect_uri: encodeURIComponent(window.location.href),
        state: generateRandomString(16), // 生成随机字符串作为state
      },
    });

    if (res.result && res.result.qrCodeUrl) {
      wxQrCodeUrl.value = res.result.qrCodeUrl;
      wxLoginState.value = res.result.state;

      // 开始轮询检查登录状态
      startWxLoginPolling();
    } else {
      throw new Error("获取二维码失败");
    }
  } catch (error) {
    console.error("获取微信登录二维码失败:", error);
    uni.showToast({
      title: "获取二维码失败",
      icon: "none",
    });
    closeWxQrCodePopup();
  }
};

// 关闭微信扫码登录弹窗
const closeWxQrCodePopup = () => {
  wxQrCodePopupVisible.value = false;
  wxQrCodeUrl.value = "";

  // 清除轮询定时器
  if (wxLoginPollingTimer.value) {
    clearInterval(wxLoginPollingTimer.value);
    wxLoginPollingTimer.value = null;
  }
};

// 开始轮询检查微信扫码登录状态
const startWxLoginPolling = () => {
  // 清除可能存在的旧定时器
  if (wxLoginPollingTimer.value) {
    clearInterval(wxLoginPollingTimer.value);
  }

  // 设置轮询间隔为2秒
  wxLoginPollingTimer.value = setInterval(async () => {
    try {
      // 调用云函数检查登录状态
      const res = await uni.callFunction({
        name: "checkWxLoginStatus",
        data: {
          state: wxLoginState.value,
        },
      });

      if (res.result && res.result.status === 1) {
        // 登录成功，清除轮询
        clearInterval(wxLoginPollingTimer.value);

        // 关闭弹窗
        closeWxQrCodePopup();

        // 处理登录成功
        handleLoginSuccess(res.result.userInfo);
      }
    } catch (error) {
      console.error("轮询微信登录状态失败:", error);
    }
  }, 2000);
};

// 生成随机字符串作为state
const generateRandomString = (length) => {
  const characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let result = "";
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
};

// 处理登录成功
const handleLoginSuccess = async (userInfo) => {
  console.log("登录成功，用户信息:", userInfo);

  // 更新用户信息到store
  userStore.setUserInfo(userInfo);

  try {
    console.log("准备获取用户订单...");
    // 先尝试获取用户订单
    await userStore.fetchOrders();
    console.log("获取到订单数量:", userStore.orders);

    // 如果没有订单，则初始化一些示例订单
    if (userStore.orders.length === 0) {
      console.log("无订单，准备初始化示例订单...");
      // 调用初始化订单的云函数
      const initResult = await uni.callFunction({
        name: "initOrders",
        data: {
          account: userInfo.account,
        },
      });

      console.log("初始化订单结果:", initResult.result);

      if (initResult.result && initResult.result.status === 1) {
        console.log("初始化订单成功:", initResult.result);
        // 重新获取订单
        await userStore.fetchOrders();
        console.log("重新获取订单后数量:", userStore.orders.length);
      }
    }
  } catch (error) {
    console.error("初始化订单失败:", error);
  }

  uni.showToast({
    title: "登录成功",
    icon: "success",
    duration: 1500,
  });

  // 延迟跳转，让用户看到成功提示
  setTimeout(() => {
    uni.reLaunch({
      url: "/pages/index/index",
    });
  }, 1500);
};

// 判断当前是否在微信浏览器中
const isWeixinBrowser = () => {
  // #ifdef H5
  const ua = navigator.userAgent.toLowerCase();
  return ua.indexOf("micromessenger") !== -1;
  // #endif
  return false;
};

// 获取URL参数
const getUrlParam = (name) => {
  // #ifdef H5
  const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  const r = window.location.search.substr(1).match(reg);
  if (r != null) return decodeURIComponent(r[2]);
  return null;
  // #endif
  return null;
};

// QQ登录
const qqLogin = async () => {
  try {
    // 显示加载中
    uni.showLoading({
      title: "登录中...",
      mask: true,
    });

    // #ifdef MP-QQ
    // QQ小程序登录流程
    const loginRes = await uni.login({ provider: "qq" });

    let userInfo = null;
    try {
      const userRes = await uni.getUserInfo({ provider: "qq" });
      userInfo = userRes.userInfo;
    } catch (e) {
      console.log("用户拒绝授权个人信息:", e);
    }

    const qqResult = await uni.callFunction({
      name: "otherLogin",
      data: {
        provider: "qq",
        code: loginRes.code,
        userInfo: userInfo,
      },
    });

    if (qqResult.result.status === 1) {
      handleLoginSuccess(qqResult.result.userInfo);
    } else {
      throw new Error(qqResult.result.message || "登录失败");
    }
    // #endif

    // #ifdef APP-PLUS
    // APP端QQ登录
    uni.login({
      provider: "qq",
      success: async function (loginRes) {
        if (loginRes.errMsg == "login:ok") {
          const appQQResult = await uni.callFunction({
            name: "otherLogin",
            data: {
              provider: "qq",
              code: loginRes.code,
              authResult: loginRes.authResult,
            },
          });

          if (appQQResult.result.status === 1) {
            handleLoginSuccess(appQQResult.result.userInfo);
          } else {
            throw new Error(appQQResult.result.message || "登录失败");
          }
        } else {
          throw new Error("QQ登录失败");
        }
      },
      fail: function (err) {
        console.error("App QQ登录失败:", err);
        uni.showToast({
          title: "QQ登录失败",
          icon: "none",
        });
      },
    });
    // #endif

    // #ifdef H5
    // H5 QQ登录
    // 获取QQ授权码
    const code = getUrlParam("code");
    if (!code) {
      const QQ_APP_ID = process.env.VUE_APP_QQ_APPID || "";
      const redirectUri = encodeURIComponent(window.location.href);
      window.location.href = `https://graph.qq.com/oauth2.0/authorize?client_id=${QQ_APP_ID}&redirect_uri=${redirectUri}&response_type=code&scope=get_user_info`;
      return;
    }

    const h5QQResult = await uni.callFunction({
      name: "otherLogin",
      data: {
        provider: "qq",
        code: code,
        platform: "h5",
      },
    });

    if (h5QQResult.result.status === 1) {
      handleLoginSuccess(h5QQResult.result.userInfo);
    } else {
      throw new Error(h5QQResult.result.message || "登录失败");
    }
    // #endif
  } catch (error) {
    console.error("QQ登录错误:", error);
    uni.showToast({
      title: error.message || "QQ登录失败",
      icon: "none",
    });
  } finally {
    uni.hideLoading();
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.background-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;

  &.active {
    opacity: 1;
  }

  &.fade-out {
    opacity: 0;
  }

  &.fade-in {
    opacity: 1;
  }
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  // backdrop-filter: blur(5px);
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 600rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);

  .login-title {
    color: var(--td-brand-color);
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  }
}

.login-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.login-form {
  margin-bottom: 40rpx;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: var(--td-brand-color);
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(152, 31, 35, 0.3);

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 6rpx rgba(152, 31, 35, 0.3);
  }
}

.tips-section {
  text-align: center;
  margin: 20rpx 0;
}

.tips-text {
  font-size: 24rpx;
  color: rgba(0, 0, 0, 0.6);
}

.register-link {
  text-align: center;
  font-size: 28rpx;

  .link-text {
    color: var(--td-brand-color);
    font-weight: bold;
    margin-left: 10rpx;
  }
}

// 添加动画类
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate__fadeIn {
  animation: fadeIn 0.8s ease-out;
}

.forgot-password {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30rpx;
}

.forgot-link {
  display: flex;
  align-items: center;
  gap: 6rpx;
  color: var(--td-brand-color, #0052d9);
  font-size: 28rpx;

  &:active {
    opacity: 0.8;
  }
}

.guide-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
}

.guide-swiper {
  width: 100%;
  height: 100%;
}

.guide-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.guide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-content {
  position: absolute;
  bottom: 160rpx;
  left: 0;
  right: 0;
  padding: 40rpx;
  text-align: center;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.guide-title {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.guide-desc {
  font-size: 32rpx;
  opacity: 0.9;
  display: block;
  margin-bottom: 40rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.guide-actions {
  margin-top: 60rpx;
}

.start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  background: var(--td-brand-color);
  color: #fff;
  padding: 20rpx 60rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);

  .bi {
    font-size: 36rpx;
  }

  &:active {
    transform: scale(0.98);
  }
}

.skip-btn {
  position: absolute;
  top: 60rpx;
  right: 40rpx;
  padding: 10rpx 30rpx;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10rpx);
  border-radius: 30rpx;
  color: #fff;
  font-size: 24rpx;
  z-index: 10;

  &:active {
    opacity: 0.8;
  }
}

:deep(.uni-swiper-dot) {
  width: 12rpx !important;
  height: 12rpx !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.4) !important;
  margin: 0 8rpx !important;

  &.uni-swiper-dot-active {
    width: 24rpx !important;
    border-radius: 12rpx !important;
    background: #fff !important;
  }
}

// 添加第三方登录样式
.divider {
  position: relative;
  text-align: center;
  margin: 40rpx 0;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1rpx;
    background: rgba(0, 0, 0, 0.1);
  }

  &::before {
    left: 0;
  }

  &::after {
    right: 0;
  }

  .divider-text {
    display: inline-block;
    padding: 0 20rpx;
    font-size: 24rpx;
    color: #999;
    background: #fff;
  }
}

.third-party-login {
  display: flex;
  justify-content: center;
  gap: 40rpx;
  margin-top: 30rpx;
}

.third-party-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  width: 220rpx;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
  color: #fff;

  .bi {
    font-size: 36rpx;
  }

  &.wx-btn {
    background: #07c160;

    &:active {
      background: darken(#07c160, 5%);
    }
  }

  &.qq-btn {
    background: #12b7f5;

    &:active {
      background: darken(#12b7f5, 5%);
    }
  }
}

.privacy-agreement {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.custom-checkbox {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid var(--td-brand-color);
  border-radius: 6rpx;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;

  &.checked {
    background-color: var(--td-brand-color);
    color: #fff;
  }

  .bi {
    font-size: 24rpx;
  }
}

.privacy-text {
  color: var(--td-brand-color);
  font-size: 26rpx;
}

.qrcode-popup-content {
  background: #fff;
  width: 600rpx;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.qrcode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.qrcode-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.close-icon {
  font-size: 40rpx;
  color: #999;
}

.qrcode-container {
  width: 400rpx;
  height: 400rpx;
  margin: 0 auto;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrcode-image {
  width: 100%;
  height: 100%;
}

.qrcode-loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrcode-tips {
  margin-top: 30rpx;
  text-align: center;

  text {
    display: block;
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}
</style>
